<!DOCTYPE html>
<html>
<#include "../../common/header.ftl">
<link rel="stylesheet" href="${basePath}/plugins/layui/css/layui.css">  
<script src="${basePath}/js/public/groupList.js?time=201710251815"></script>
<script src="${basePath}/plugins/layui/layui.js" charset="utf-8"></script>
<head>
<meta charset="UTF-8">
<title>商品选择列表</title>
<style>
	.left{
		float:left;
		min-width:100px;
		margin-left: 10px;
	}
	.red_text{
		color:red;
	}
	.blue_text{
		color:blue;
	}
	.table-margin{
		margin:5px 3%;
		width:92%;
	}
</style>
</head>
<body>
   
<div class="container" style="margin-left:5%">
<form class="layui-form left" action="#" >
<div class="layui-form-item ">
    <label class="layui-form-label left">组货场景</label>
    <div class="layui-input-block left">
      <select name="scene" >
        <option value="">所有</option>
        <option value="">所有</option>
        <#list sceneList! as scene>
        	<option value="${scene.name}" disabled>${scene.name}</option>
        	<#list scene.childrenList! as child>
        		<option value="${child.name}" <#if param.scene?? && (param.scene == child.name)> selected</#if> >&nbsp;&nbsp;&nbsp;&nbsp;${child.name}</option>
        	</#list>
        </#list>
      </select>
    </div>
    <label class="layui-form-label left">组货风格</label>
    <div class="layui-input-block left">
      <select name="style" >
      	<option value="">所有</option>
        <option value="">所有</option>
      	<#list styleList! as style>
        	<option value="${style.name}" disabled>${style.name}</option>
        	<#list style.childrenList! as child>
        		<option value="${child.name}" <#if param.style?? && (param.style == child.name)> selected</#if> >&nbsp;&nbsp;&nbsp;&nbsp;${child.name}</option>
        	</#list>
        </#list>
      </select>
    </div>
</div>
<div class="layui-form-item">
 <div class="layui-input-block left">
      <input type="text" name="keyword" value="${param.keyword!}"   placeholder="适合客群" autocomplete="off" 
      class="layui-input" style="width:400px;margin-right:200px;margin-left:30px">
    </div>
     <div class="layui-input-block left">
      <button type="button" class="layui-btn"  id="search-button">搜索</button>
      <button type="button" class="layui-btn" id="save-button">保存</button>
    </div>
</div>
</form>
</div>

    <table class="table table-margin">
  <thead>
      <tr>
         <th><input type="checkBox" onclick="checkAll(this)"></th>
         <th>组货封面图</th>
         <th>风格</th>
         <th>场景</th>
         <th>适应客群</th>
      </tr>
   </thead>
	<tbody>
	<#list page.itemList! as group>
			
			<tr>
				<td><input type="checkbox" class="goods-checkbox" onclick="checkOne(this)" value="${group.groupGoodsId}" data-style="${group.style}"
				data-scene="${group.scene}" data-customer="${group.customer}" data-image="${group.coverImage}"></td>
				<td>
					<#if group.coverImage??>
						<img  src="${imgUrl+group.coverImage}" height="50px" width="50px" 
						 data-toggle="modal" data-target="#imgModal" onerror="this.src='${basePath}/images/default_goods.jpg'" />
					<#else>
						<img  src="${basePath}/images/default_goods.jpg" height="50px" width="50px"  data-toggle="modal" data-target="#imgModal"/> 
					</#if>
				</td>
				
				<td>${group.style!}</td>
				<td>${group.scene!}</td>
				<td>${group.customer!}</td>
			</tr>
	</#list>
	</tbody>
	</table>
 
	<#-- 翻页模块代码 -->
	<ul class="pager">
		<li><a href="javascript:void(0);" onclick="fanye('1')">首页</a></li>
		<#if page.pageNo!=1 > 
		<li><a	href="javascript:void(0);" onclick="fanye('${page.prevPage}')">上一页</a></li>
		<#else>
		<li><a href="javascript:void(0);">上一页</a></li> 
		</#if>
		<li><a href="javascript:void(0);">第${page.pageNo}页/共${page.totalPage}页</a></li>
		<#if (page.nextPage>page.pageNo) >
		<li><a href="javascript:void(0);" onclick="fanye('${page.nextPage}')">下一页</a></li>
		<#else>
		<li><a href="javascript:void(0);">下一页</a></li>
		</#if>
		<li><a href="javascript:void(0);" onclick="fanye('${page.totalPage}')">尾页</a></li>
	</ul>
  
</body>
<script type="text/javascript">
	var basePath="${basePath}";
	var init={
		keyword:"${param.keyword!}",
		chooseType:"${chooseType}",
		style:"${param.style!}",
		scene:"${param.scene!}"
	}
	$(function(){
		layui.use(['form', 'layer'], function(){
		  var layer = layui.layer;
		  var form = layui.form(); 
		});
	});
</script>
</html>